<template>
	<view>
		<uni-popup ref="reserve" type="center" borderRadius="16px 16px 0 0" zindex>
			<view class="carListBox">
				<view class="titles">请选择离您最近的门店</view>
				<view class="storeList" v-for="(item,index) in storeList" :key="index" @click="checkedS(item,index)">
					<view class="store_lefr">
						<view class="flex align-center">
							<!-- <view class="left_name">{{item&&item.vnick.length > 6 ? item.vnick.substring(3) : item.vnick}}</view> -->
              <view class="left_name">{{item.vnick}}
							<!-- <text class="text-sm text-c9 text-nomal" v-if="!(item.work_status=='233' || item.work_status=='974')">暂未开通</text> -->
							</view>
							<!-- <view class="tags">{{item.storeType}}</view> -->
							<!-- <view class="left_name">请选择离您最近的门店请选择离您最近的门店</view> -->
						</view>
						<view class="left_dis">{{userStore.getAdresGps&&userStore.getAdresGps.hasGps?'距离':'距您'}}{{ item.distance ? item.distance : '0' }}{{ item.distanceUnit ? item.distanceUnit : 'm' }}</view>
					</view>
					<view class="right_icon">
						<text class="cuIcon-roundright" style="color: #333;font-size: 52rpx;"></text>
					</view>
				</view>
				<view class="footers" @click="mnavTo('/pages/others/shopList/shopList?source=' + 'checkstore')">
					更多门店<text class="cuIcon-right" style="color:#999"></text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from "vue";
	import { mnavTo } from '@/utils/helper';
	import { getStoreList, getFollowStoreList } from '@/api/vmeitime-http/index.js'
	import mapi from '@/utils/mapi';
	import { useShopStore } from '@/stores/shopStore';
	import { useUserStore } from '@/stores/commonStore';
	const shopStore = useShopStore();
	const userStore = useUserStore()
	const emit = defineEmits(["storeChecked"]);
	const reserve = ref();
	const longitude = ref()
	const latitude = ref()
	let state = reactive({
		latitude: 28.208399,
		longitude: 113.06463,
		mapLatitude: 28.208399,
		mapLongitude: 113.06463,
		covers: [],
		scale: 14, //地图层级，取值范围为5-18，默认16，14最优，11看长沙市
	})
	const storeList = ref([])

	//门店位置列表
	const getCarLists = async (longitude : any, latitude : any) => {
		const paramData = {
			longitude: longitude || 113.06463,
			latitude: latitude || 28.208399,
			vtype_two_category: 0,
			vtype: '835',
			nmember_id: '',
			vIsFirstShop: '猪会飞',
			sku:[],
			curPage: 1,
			pageSize: 200
		};
		await fetchStoreList(paramData, getStoreList);
		reserve.value.open();
	};
	const fetchStoreList = async (paramData : any, apiFunction : any) => {
		try {
			let res = await apiFunction(paramData);
			if (!res.result) throw new Error('获取门店失败!');
			let resulFinal = processStoreData(res.object, state.latitude);
			storeList.value = []
			for (let item of resulFinal) {
				// let resultName = item.vnick.length > 6 ? item.vnick.substring(3) : item.vnick
				storeList.value.push(item)
				// {
				// 	storeName: resultName,
				// 	distance: item.distance + item.distanceUnit,
				// 	storeType: "全品店",
				// 	sellMemberId: item.nmember_id
				// }
			}
		} catch (e) {
			mapi.msg('获取门店失败!');
		}
	};
	// 地址列表
	const processStoreData = (data : any, latitude : any) => {
		let array = [];
		for (let key in data) {
			let dist = latitude ? key.split('.')[0] : '';
			data[key]['distanceUnit'] = dist.length > 3 ? 'km' : 'm';
			dist = dist.length > 3 ? (Number(dist) / 1000).toFixed(2) : dist;
			data[key]['distance'] = dist;
			array.push(data[key]);
		}
		return array;
	};
	const checkedS = (item : any, index : any) => {
		console.log('checkedS',item,shopStore.shopInfo)
		console.log('checkedS222',item.nmember_id,shopStore.shopInfo.nmember_id)
		// if (!(item.work_status == '233' || item.work_status == '974')) {
		// 	return
		// }
		if(item.nmember_id&&item.nmember_id!=shopStore.shopInfo.nmember_id){
			shopStore.setShop(item)
		}
		emit("storeChecked", item)
		closeDialog()
	}
	const openDialog = (v ?: any) => {
		uni.getLocation({
			//获取当前的位置坐标
			type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				longitude.value = res.longitude;
				latitude.value = res.latitude;
				getCarLists(res.longitude, res.latitude)
			},
			fail: function (err) {
				console.log('定位失败', err);
			}
		});
	};
	const closeDialog = () => {
		reserve.value.close();
	};

	defineExpose({ openDialog, closeDialog });
</script>

<style lang="scss" scoped>
	.carListBox {
		width: 710rpx;
		min-height: 100rpx;
		background: #f4f5f7;
		box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-radius: 20rpx;

		.titles {
			width: 100%;
			height: 45rpx;
			text-align: center;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-weight: 400;
		}

		.storeList {
			width: 654rpx;
			height: auto;
			border-radius: 16rpx;
			background: #FFF;
			margin: auto;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;

			.store_lefr {
				width: 80%;
				height: auto;
				padding: 40rpx 20rpx 40rpx 40rpx;

				.left_name {
					color: #333;
					text-align: left;
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-style: normal;
					font-weight: 700;
				}

				.left_dis {
					color: #666;
					text-align: left;
					font-family: "Microsoft YaHei UI";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					margin-top: 30rpx;
				}
			}

			.tags {
				min-width: 90rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #fff;
				margin-left: 10rpx;
				border-radius: 98rpx;
				font-size: 28rpx;
				padding: 0rpx 14rpx 0rpx 14rpx;
				// margin-top: 6rpx;
				background-color: #53A87F;
				text-align: center;
			}
		}

		.right_icon {
			width: 20%;
			height: auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.footers {
			height: 45rpx;
			text-align: center;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-weight: 400;
			padding-top: 20rpx;
			margin: 10rpx 0rpx 10rpx 0rpx;
		}
	}
</style>